<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="600px" v-loading="loading">
    <el-form :model="MemberBa" :rules="formMember" label-width="80px" ref="MemberForm" label-position="right"
      size="small">
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息" class="user-info-tab-pane">
          <el-row>
            <el-col :span="12">
              <el-form-item label="档案号" prop="hFn">
                <el-input :maxlength="32" v-model="MemberBa.hFn" autofocus></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证" prop="hNumber">
                <el-input v-model="MemberBa.hNumber" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="登录密码" prop="hPassword">
                <el-input v-model="MemberBa.hPassword" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="hPhone">
                <el-input v-model="MemberBa.hPhone" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="hName">
                <el-input v-model="MemberBa.hName" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄" prop="hAge">
                <el-input type="number" min="1" max="150" v-model="MemberBa.hAge"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别" prop="hSex">
                <el-input v-model="MemberBa.hSex" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族" prop="hNation">
                <el-input v-model="MemberBa.hNation" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出生日期" prop="hDateofbirth">
                <el-date-picker style="width: 184px" v-model="MemberBa.hDateofbirth" type="date" placeholder="选择日期"
                  value-format="yyyy-MM-dd" @change="getSTime">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="hMailbox">
                <el-input v-model="MemberBa.hMailbox" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="家族史">
                <el-input class="properties-textarea" type="textarea" :rows="3" v-model="MemberBa.hFamilyhistory">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="过敏史">
                <el-input class="properties-textarea" type="textarea" :rows="3" v-model="MemberBa.hAllergy">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="病史">
                <el-input class="properties-textarea" type="textarea" :rows="3" v-model="MemberBa.hMedicalhistory">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('MemberForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { updateMember } from "@/api/HMemberofthefile";
  import {
    isPassword,
    validatePhone,
    validateEMail,
    validateIdNo,
    isOneToNinetyNine,
  } from "@/utils/validate";

  export default {
    name: "basic-edit",
    data() {
      return {
        loading: false,
        dialogProps: {
          visible: false,
          action: "",
          title: "",
        },
        MemberBa: {
          hId: "",
          hFn: "",
          hName: "",
          hSex: "",
          hAge: "",
          hNumber: "",
          hPhone: "",
          hRegistration: "",
          hPassword: "",
          hNation: "",
          hDateofbirth: "",
          hMailbox: "",
          hFamilyhistory:"",
          hAllergy:"",
          hMedicalhistory:"",
        },
        formMember: {
          hFn: [
            { required: true, message: "请输入档案号", trigger: "blur" },
            { validator: isPassword, trigger: "blur" },
          ],
          hName: [
            { required: true, message: "请输入姓名", trigger: "blur" },
            { min: 2, max: 8, message: "长度在 2 到 12 个字符", trigger: "blur" },
          ],
          hAge: [
            { required: true, message: "请输入年龄", trigger: "blur" },
            {
              pattern: /^(1|[1-9]\d?|)$/,
              message: "请输入1-99",
              trigger: "blur",
            },
          ],
          hPhone: [
            { required: true, message: "请输入电话", trigger: "blur" },
            { validator: validatePhone, trigger: "blur" },
          ],
          hSex: [{ required: true, message: "请输入性别", trigger: "blur" }],
          hPassword: [
            { required: true, message: "请输入密码", trigger: "blur" },
            { validator: isPassword, trigger: "blur" },
          ],
          // hMailbox: [
          //   { required: true, message: "请输入邮箱", trigger: "blur" },
          //   { validator: validateEMail, trigger: "blur" },
          // ],
          hNumber: [
            { required: true, message: "请输入身份证", trigger: "blur" },
            { validator: validateIdNo, trigger: "blur" },
          ],
        },
      };
    },
    methods: {
      getSTime(val) {
        this.MemberBa.hDateofbirth = val;
      },
      //确定事件
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.dialogProps.action === "add") {
              this.doSaveMemberA();
            } else {
              this.doUpdateMember();
            }
          } else {
            return false;
          }
        });
      },
      //修改
      doUpdateMember() {
        this.loading = true;
        updateMember(this.MemberBa)
          .then((response) => {
            this.loading = false;
            this.dialogProps.visible = false;
            this.$emit("save-finished");
            this.$message({
              message: "修改成功",
              type: "success",
            });
          })
          .catch((error) => {
            this.outputError(error);
          });
      },
      handleDialogClose() {
        this.dialogProps.visible = false;
      },
    },
    //修改
    mounted: function () {
      this.$nextTick(() => {
        this.$on("opendEitMemberDialog", function (Member) {
          this.MemberBa = Member;
          this.dialogProps.action = "edit";
          this.dialogProps.title = "修改";
          this.dialogProps.visible = true;
        });
      });
    },
  };
</script>
<style lang="scss" scoped>
  .properties-textarea {
    width: 496px;
  }
</style>
